
<script setup lang="ts">
import { ref } from 'vue'
import citys from '@/common/city.js'
console.log(citys,'citys')
const searchText = ref('')
const hotCity = ref(['北京', '深圳', '上海', '成都', '广州', '重庆'])
const LatterName = ref(citys.hostCity)
const CityList = ref(citys.cityList) //引用js数据
const LetterId = ref('')

const onselectChange = (event) => {
    console.log(event.detail);
    searchVal.value = event.detail
}
const checkItem = (item) => {
    uni.$emit('checkCity',item)
    uni.navigateBack({
        delta: 1
    })
}
const getLetter = (name) => {
    console.log(name,'0000')
    LetterId.value = name
}
const searchCancel = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>


<template>
    <view class="select-city">
        <view class="search">
            <wd-search v-model="searchVal" @change="onselectChange" placeholder="输入城市名或拼音查询" maxlength="10" @cancel="searchCancel"/>
            <!-- <van-field class="select-input" input-align="left" :value="searchVal" placeholder="输入城市名或拼音查询" @change='onselectChange($event)'/> -->
            <!-- <image class="search-ico" src="../../static/icon.png" mode=""></image> -->
        </view>
        <scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
            <view class="hotcity" id="ScrollTop">
                <view class="hotcity-title">
                    北京 <view class="hotcity-gps">GPS定位</view>
                </view>
                <view class="hotcity-cont">
                    <view class="hotcity-name">国内热门城市</view>
                    <view class="hotcity-menus">
                        <view class="hotcity-item" v-for="(item,index) in HotCity" :key='index' @tap="checkItem(item)">{{item}}</view>
                    </view>
                </view>
            </view>
            <view class="divider"></view>
            <view class="citycont" v-for="(item,index) in CityList" :key="index">
                <view class="city-letter" :id="item.idx">{{item.idx}}</view>
                <view class="city-item" @tap="checkItem(item_city.name)" v-for="(item_city,name_index) in item.cities" :key="name_index">{{item_city.name}}</view>
            </view>
        </scroll-view>
        
        <!-- <view class="city-letter-position">
            <view class="city-letter-rm" @tap="getLetter('ScrollTop')">热门</view>
            <view class="city-letter-ite" v-for="(item,index) in LatterName" :key="index" @tap="getLetter(item)"  :style="{'color': LetterId === item ? '#4662D9' : '#000' }">{{item}}</view>
        </view> -->
    </view>
</template>

<style scoped lang="scss">
.ynq-ScrollView {
    height: calc(100vh - 160rpx);
}

.select-city{
    .search {
        height: 80rpx;
        background-color: #fff;
        padding-top: 10rpx;
        margin: 0 20rpx;
        position: relative;
        .select-input{
            width: 86%;
            height: 65rpx;
            padding-left: 30rpx;
            margin: auto;
            overflow: hidden;
            background-color: #fff;
            border-radius: 38rpx;
            display: flex;
            align-items: center;
        }
        .search-ico{
            width: 35rpx;
            height: 35rpx;
            position: absolute;
            top: 26rpx;
            left: 54rpx;
        }
    }
    .hotcity{
        margin: 0 20rpx;
        .hotcity-title{
            height: 65rpx;
            line-height: 65rpx;
            font-size: 32rpx;
            font-weight: 600;
            display: flex;
            border-bottom: 1px solid #ccc;
            .hotcity-gps{
                font-size: 28rpx;
                color: #ccc;
                margin: 10rpx 0 0 12rpx;
            }
        }
        .hotcity-name{
            height: 65rpx;
            line-height: 65rpx;
            color: #ccc;
        }
        .hotcity-menus{
            width: 90%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            .hotcity-item{
                width: 30%;
                padding: 10rpx 0;
                margin-bottom: 20rpx;
                border: 1px solid #e1e1e1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .divider{
        width: 100%;
        height: 24rpx;
        background-color: #e1e1e1;
    }
    .citycont{
        width: 88%;
        margin-left: 20rpx;
        .city-letter{
            height: 80rpx;
            line-height: 90rpx;
        }
        .city-item{
            height: 80rpx;
            line-height: 80rpx;
            border-bottom: 1px solid #e1e1e1;
        }
    }
    .city-letter-position{
        width: 62rpx;
        position: fixed;
        right: 20rpx;
        top: 180rpx;
        text-align: center;
        z-index: 123;
        .city-letter-rm{
            font-size: 24rpx;
        }
        .city-letter-ite{
            font-size: 24rpx;
            line-height: 1.5;
        }
    }
}
</style>

<route type="page" lang="json">
    {
      "layout": "tabbar",
      "name": "首页",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
    </route>